<template>
  <el-collapse>
    <div class="navbox" style="margin-top: -20px;">
      <div class="zhanBox" @click="changeadvanced">
        <span>{{ advanced ? "收起" : "展开" }}</span>
        <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
      </div>
      <div class="steps" v-show="advanced"></div>
      <div class="flex justifyContentSpaceBetween" v-show="advanced">
        <span class="buzhou fl">
          <div :class="sign.a?'yuan2 mb5':'yuan mb5'">1</div>
          <div :class="sign.a?'ys':''">考核汇总</div>
        </span>
        <span class="buzhou fl">
          <div :class="sign.b?'yuan2 mb5':'yuan mb5'">2</div>
          <div :class="sign.b?'ys':''">部门汇总</div>
        </span>
        <span class="buzhou fl">
          <div :class="sign.c?'yuan2 mb5':'yuan mb5'">3</div>
          <div :class="sign.c?'ys':''">领导审核</div>
        </span>
        <span class="buzhou fl">
          <div :class="sign.d?'yuan2 mb5':'yuan mb5'">4</div>
          <div :class="sign.d?'ys':''">分数提取</div>
        </span>


      </div>
    </div>
  </el-collapse>
</template>

<script>
export default {
  props: {
    sign: {}
  },
  data() {
    return {
      advanced: false,
      height: "0"
    };
  },
  methods: {
    changeadvanced() {
      this.advanced = !this.advanced;
      if (this.advanced) {
        this.height = "50";
      }
    },
    init() {}
  }
};
</script>
<style scoped>
.steps {
  height: 2px;
  background: #1f84ec;
  width: 100%;
  margin-top: 20px;
}

.ys {
  color: #1f84ec;
}

.yuan {
  height: 40px;
  width: 40px;
  line-height: 40px;
  background: #d6e8fb;
  border-radius: 50%;
  margin-top: -20px;
  margin-left: 34%;
  color: #fff;
}

.yuan2 {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: #1f84ec;
  margin-top: -20px;
  margin-left: 34%;
  color: #fff;
}

.buzhou {
  width: 20%;
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
}

.fl {
  float: left;
}
</style>
